<template>
  <div>
    <div class="edit-container" pointer-events-initial>
      <div class="title">绘制围栏</div>
      <div class="type-group">
        <div class="line" :class="{ active: selectedShape === 'line' }" @click="selectShape('line')">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <line x1="5.46967" y1="13.4697" x2="13.4697" y2="5.46967" stroke="black" stroke-width="1.5" />
          </svg>
          <div>线条</div>
        </div>
        <div class="line" :class="{ active: selectedShape === 'circle' }" @click="selectShape('circle')">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="10" cy="10" r="4.75" stroke="black" stroke-width="1.5" />
          </svg>

          <div>圆形</div>
        </div>
        <div class="line" :class="{ active: selectedShape === 'coordinate' }" @click="selectShape('coordinate')">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M3.83248 8.29726C3.51708 8.17026 3.52078 7.98156 3.85348 7.87066L15.6538 3.93196C15.9809 3.82296 16.1682 4.00626 16.0767 4.32696L12.7047 16.1433C12.6119 16.4708 12.411 16.4856 12.2614 16.1866L9.44448 10.5446L3.83248 8.29726ZM6.85578 8.17346L10.3404 9.56946L12.2199 13.335L14.4123 5.65176L6.85518 8.17346H6.85578Z"
              fill="black"
            />
          </svg>
          <div>坐标</div>
        </div>
      </div>
      <el-form :model="localEditData">
        <el-form-item label="车辆分组">
          <el-input v-model="localEditData.id" />
        </el-form-item>
        <el-form-item label="围栏名称">
          <el-input v-model="localEditData.name" />
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker
            v-model="localEditData.telephone"
            type="datetime"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="选择开始时间"
          />
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            v-model="localEditData.date"
            type="datetime"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="选择结束时间"
          />
        </el-form-item>
        <!-- 其他表单项 -->
      </el-form>
      <div class="btn-group">
        <el-button @click="$emit('cancel')">取消</el-button>
        <el-button @click="saveChanges">保存</el-button>
      </div>
    </div>
  </div>
  <!-- 地图容器 -->
  <div ref="tdtMapDiv" class="divTdtMap" pointer-events-initial />
</template>

<script lang="ts" setup>
import { ref, watch, defineProps, defineEmits, onMounted } from "vue"
const selectedShape = ref("line")
const tdtMapDiv = ref<HTMLDivElement | null>(null)
const props = defineProps<{ editData: User }>()
const emit = defineEmits(["save", "cancel", "delete"])
let map: any // 保存地图实例
let handler: any // 保存当前的绘制工具

interface User {
  id: string
  name: string
  num: number
  person: string
  telephone: string
  date: string
}
//切换围栏类型
// 定义可能的形状类型
type ShapeType = "line" | "circle" | "coordinate"
const selectShape = (shape: ShapeType) => {
  selectedShape.value = shape
  activateTool(shape) // 激活对应的绘图工具
}

// 创建一个局部的副本用于编辑
const localEditData = ref<User>({ ...props.editData })

// 保存修改
const saveChanges = () => {
  emit("save", localEditData.value) // 发射保存事件，将编辑的数据传回父组件
}

// 初始化天地图
const initTdtMap = () => {
  if (tdtMapDiv.value) {
    // 使用天地图 API 创建地图实例
    map = new T.Map(tdtMapDiv.value)

    // 设置地图中心点及缩放级别（这里是北京的经纬度）
    const centerPoint = new T.LngLat(103.84998, 30.06991)
    map.centerAndZoom(centerPoint, 12)

    // 添加天地图图层
    const layer = new T.TileLayer()
    map.addLayer(layer)
    // // 获取用户当前地理位置
    // getCurrentLocation()
  }
}
// 获取当前地理位置
// const getCurrentLocation = () => {
//   if (navigator.geolocation) {
//     navigator.geolocation.getCurrentPosition(
//       (position) => {
//         const { latitude, longitude } = position.coords
//         const currentLocation = new T.LngLat(longitude, latitude)

//         // 在地图上标记当前位置
//         const marker = new T.Marker(currentLocation) // 创建标记
//         map.addOverLay(marker) // 使用 addOverlay 方法来添加标记

//         // 将地图中心移到当前位置
//         map.centerAndZoom(currentLocation, 15)
//       },
//       (error) => {
//         console.error("Geolocation error:", error)
//       },
//       {
//         enableHighAccuracy: true, // 尝试使用高精度定位
//         timeout: 5000, // 超时设定
//         maximumAge: 0 // 取消缓存
//       }
//     )
//   } else {
//     console.error("Geolocation is not supported by this browser.")
//   }
// }
// 激活对应的工具
const activateTool = (shape: string) => {
  if (handler) handler.close() // 关闭之前的绘图工具

  const config = {
    showLabel: true,
    color: "#059669",
    weight: 6,
    opacity: 1,
    fillColor: "#FFFFFF",
    fillOpacity: 0.1
  }

  if (shape === "line") {
    // 线条工具
    handler = new T.PolylineTool(map, config)
    handler.open()
  } else if (shape === "circle") {
    // 圆形工具
    handler = new T.CircleTool(map, config)
    handler.open()
  } else if (shape === "coordinate") {
    // 点标注工具
    handler = new T.MarkTool(map, { follow: true })
    handler.open()
  }
}
watch(
  () => props.editData,
  (newData) => {
    localEditData.value = { ...newData } // 当传入的新数据变化时更新局部数据
  }
)
onMounted(() => {
  initTdtMap()
  activateTool(selectedShape.value) // 默认激活线条工具
})
</script>

<style scoped lang="scss">
.divTdtMap {
  width: 100%;
  height: 100%;
}
.edit-container {
  width: 406px;
  height: 388px;
  background: #ffffff;
  box-shadow: 0px 0px 22px 0px rgba(0, 83, 79, 0.25);
  border-radius: 8px 8px 8px 8px;
  padding: 18px 22px;
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 1000;
  .title {
    font-family: AlibabaPuHuiTi20;
    font-weight: bold;
    font-size: 19px;
    color: #000000;
    margin-bottom: 21px;
  }
  .type-group {
    width: 234px;
    height: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    .line {
      width: 62px;
      height: 28px;
      border-radius: 2px 2px 2px 2px;
      text-align: center;
      line-height: 28px;
      font-weight: 600;
      font-family: AlibabaPuHuiTi20;
      font-size: 14px;
      color: #000000;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .active {
      background-color: #00d090;
    }
  }
  .btn-group {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
